<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Gradient Order</title>
    <style>
      html {
        height: auto;
        min-height: 100%;
        margin: 0;
      }
      body {
        display: flex;
        flex-direction: column;
        margin: 0;
        min-height: 100%;
        width: 100%;
        position: absolute;
        font-family: system-ui, Arial, Helvetica, sans-serif;
        user-select: none; /* Standard syntax */
        color: white;
        background: #202020;
      }
      header {
        margin: 10px;
      }
      footer {
        margin: 5px;
      }
      .page-wrapper {
        margin: 2px;
      }
      .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        min-height: 40%;
        margin: 2px;
      }
      .column {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        flex: 1;
        background: #404040;
      }
      canvas:focus {
        outline: red 1px solid;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>niivue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <header>
      <button id="openBtn">Choose an image with a dialog</button>
      <section>
        <label id="images"></label>
      </section>
      <label for="gradientOpacity">Gradient Opacity</label>
      <input type="range" min="0" max="10" value="5" class="slider" id="gradientOpacity">
      <label for="matCaps">Choose a MatCap:</label>
      <select id="matCaps">
        <option value="Shiny">Shiny</option>
        <option value="Cortex">Cortex</option>
        <option value="Cream">Cream</option>
        <option value="Fuzzy">Fuzzy</option>
        <option value="Peach">Peach</option>
        <option value="Plastic" selected>Plastic</option>
      </select>
    </header>
    <main id="container">
      <div class="page-wrapper">
        <div class="row">
          <div class="column">
            <div>
              <canvas id="gl1" height="512"></canvas>
            </div>
          </div>
          <div class="column">
            <div>
              <canvas id="gl2" height="512"></canvas>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="column">
            <div>
              <canvas id="gl3" height="512"></canvas>
            </div>
          </div>
          <div class="column">
            <div>
              <canvas id="gl4" height="512"></canvas>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer>
      <label for="canvasHeight">Height</label>
      <select id="canvasHeight">
        <option value="256">256</option>
        <option value="640" selected>512</option>
        <option value="768">768</option>
      </select>
      <footer id="intensity">&nbsp;</footer>
    </footer>
  </body>
</html>
<script type="module">
  import { Niivue, NVImage, NVMesh, NVMeshLoaders, SHOW_RENDER } from '../dist/index.js'
  function handleIntensityChange(data) {
    document.getElementById('intensity').innerHTML = data.string
  }
  const clipPlane = [0.35, 290, 0]
  const illumination = 1.0
  let defaults = {
    backColor: [0.5, 0.5, 1, 1],
    show3Dcrosshair: true,
    loglevel: 'debug',
    isRuler: true,
    gradientOpacity: gradientOpacity.value * 0.1,
    onLocationChange: handleIntensityChange
  }
  const volumeList1 = [
    {
      url: '../images/shear.nii.gz',
      // url: "../images/otsu.nii.gz",
      colormap: 'gray',
      opacity: 1,
      visible: true
    }
  ]
  // Upper-left, render, gradient order 1
  const nv1 = new Niivue(defaults)
  await nv1.attachTo('gl1')
  nv1.loadVolumes(volumeList1)
  nv1.opts.isColorbar = true
  nv1.setSliceType(nv1.sliceTypeRender)
  nv1.setClipPlane(clipPlane)
  nv1.setVolumeRenderIllumination(illumination)

  // Upper-left, render, gradient order 2
  const nv2 = new Niivue(defaults)
  await nv2.attachTo('gl2')
  nv2.loadVolumes(volumeList1)
  nv2.opts.isColorbar = true
  nv2.opts.gradientOrder = 2
  nv2.setSliceType(nv2.sliceTypeRender)
  nv2.setClipPlane(clipPlane)
  nv2.setVolumeRenderIllumination(illumination)

  // Lower-left, gradients, gradient order 1
  const nv3 = new Niivue(defaults)
  await nv3.attachTo('gl3')
  nv3.loadVolumes(volumeList1)
  nv3.opts.isColorbar = true
  nv3.setSliceType(nv3.sliceTypeRender)
  nv3.setClipPlane(clipPlane)
  nv3.setVolumeRenderIllumination(NaN)

  // Lower-right, gradients, gradient order 2
  const nv4 = new Niivue(defaults)
  await nv4.attachTo('gl4')
  nv4.loadVolumes(volumeList1)
  nv4.opts.isColorbar = true
  nv4.opts.gradientOrder = 2
  nv4.setSliceType(nv4.sliceTypeRender)
  nv4.setClipPlane(clipPlane)
  nv4.setVolumeRenderIllumination(NaN)

  const renderers = [nv1, nv2, nv3, nv4]

  nv1.broadcastTo([nv2, nv3, nv4], { '3d': true, clipPlane: true })
  nv2.broadcastTo([nv1, nv3, nv4], { '3d': true, clipPlane: true })
  nv3.broadcastTo([nv1, nv2, nv4], { '3d': true, clipPlane: true })
  nv4.broadcastTo([nv1, nv2, nv3], { '3d': true, clipPlane: true })

  let imgs = [
    'chris_MRA',
    'chris_PD',
    'chris_t1',
    'chris_t2',
    'CT_Abdo',
    'CT_AVM',
    'CT_Electrodes',
    'CT_Philips',
    'CT_pitch',
    'fmri_pitch',
    'Iguana',
    'mni152',
    'MR_Gd',
    'pcasl',
    'spm152',
    'spmMotor',
    'visiblehuman'
  ]
  let imgEl = document.getElementById('images')
  for (let i = 0; i < imgs.length; i++) {
    let btn = document.createElement('button')
    btn.innerHTML = imgs[i]
    btn.onclick = function () {
      let root = 'https://niivue.github.io/niivue-demo-images/'
      let img = root + imgs[i] + '.nii.gz'
      console.log('Loading: ' + img)
      volumeList1[0].url = img
      renderers.forEach((nv) => {
        nv.removeVolume(nv.volumes[0])
        nv.loadVolumes(volumeList1)
        nv.updateGLVolume()
      })
    }
    imgEl.appendChild(btn)
  }

  matCaps.onchange = function () {
    const matCapName = document.getElementById('matCaps').value
    renderers.forEach((nv) => {
      nv.loadMatCapTexture('../matcaps/' + matCapName + '.jpg')
    })
  }

  async function addVolumeFromFiles(f) {
    console.log('attempting to open ', f[0].name)
    console.log('details', f[0])
    renderers.forEach((nv) => {
      nv.removeVolume(nv.volumes[0])
      nv.loadFromFile(f[0])
    })
    // nv1.loadFromFile(f[0])
  }
  openBtn.onclick = function () {
    let input = document.createElement('input')
    input.style.display = 'none'
    input.type = 'file'
    document.body.appendChild(input)
    input.onchange = function (event) {
      addVolumeFromFiles(event.target.files)
    }
    input.click()
  }

  gradientOpacity.oninput = function () {
    renderers.forEach((nv) => {
      nv.setGradientOpacity(this.value * 0.1)
    })
  }

  canvasHeight.onchange = function () {
    gl1.height = this.value
    gl2.height = this.value
    gl3.height = this.value
    gl4.height = this.value
    renderers.forEach((nv) => {
      nv.resizeListener()
    })
  }
</script>
